# This is the welcome page shown to users when they first initialize a new Lucky project
class Lucky::WelcomePage
  include Lucky::HTMLPage
  include Lucky::LiveReloadTag

  SIGN_UP_ACTION = SignUps::New

  # Accept a context and all other exposed data
  def initialize(@context : HTTP::Server::Context, *args, **named_args)
  end

  macro render_auth_button
    {% if SIGN_UP_ACTION.resolve? %}
      a "View your new app", href: {{ SIGN_UP_ACTION }}.path, class: "btn"
    {% end %}
  end

  # Renders the Welcome Page
  def render
    html_doctype
    html lang: "en" do
      head do
        utf8_charset
        title "Welcome to Lucky"
        load_lato_font
        normalize_styles
        welcome_page_styles
        live_reload_connect_tag
      end

      body do
        div class: "container" do
          lucky_logo
          render_buttons
          render_help
        end
      end
    end
  end

  private def lucky_logo
    raw %(<img src="#{lucky_logo_data_uri}" class="lucky-logo">)
  end

  private def render_buttons
    div class: "container__buttons" do
      a "Check out the guides",
        href: "https://luckyframework.org/guides",
        class: "btn btn--blue"
      render_auth_button
    end
  end

  private def render_help
    h1 "Not sure where to start? Here are some ideas:", class: "headline"

    table class: "help-table" do
      tbody do
        tr do
          td "Change what this page renders", class: "left-column"
          td class: "right-column" do
            code "src/actions/home/index.cr", class: "code"
          end
        end
        tr do
          td "Generate a model, set of actions, and HTML", class: "left-column"
          td class: "right-column" do
            code "lucky gen.resource.browser Post title:String", class: "code"
          end
        end
        tr do
          td "Ask for ideas in our chatroom", class: "left-column"
          td class: "right-column" do
            a chat_url, href: chat_url, target: "_blank"
          end
        end
      end
    end
  end

  private def chat_url
    "https://luckyframework.org/chat"
  end

  private def welcome_page_styles
    style <<-CSS
      .code {
        font-family: Menlo, "Roboto Mono", "Courier New", monospace;
        font-size: 14px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 3px;
        padding: 3px 6px;
      }

      .help-table {
        margin-left: auto;
        margin-right: auto;
        font-size: 17px;
      }

      .help-table td {
        padding: 10px 0;
      }

      .help-table a {
        color: #3de69f;
      }

      .left-column {
        text-align: right;
        width: 50%;
      }

      .left-column:after {
        content: '→';
        margin: 0 5px;
        font-weight: bold;
        opacity: 0.6;
      }

      .right-column {
        text-align: left;
        width: 50%;
      }

      body {
        background-color: #002748;
        color: #fff;
        font-family: 'Lato', system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
        border-top: 3px solid #9EFF66;
      }

      .container {
        margin: 0 auto;
        max-width: 1024px;
        margin-top: 50px;
        text-align: center;
      }

      .container__buttons {
        width: 100%;
      }

      .container__buttons .btn:first-child {
        margin-right: 20px;
      }

      .lucky-logo {
        max-width: 750px;
        margin-bottom: 40px;
      }

      .headline {
        font-weight: 400;
        font-size: 20px;
        color: #AAB5BF;
        margin-top: 90px;
        margin-bottom: 30px;
      }

      .btn {
        text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
        box-sizing: border-box;
        display: inline-block;
        border-radius: 500px;
        text-transform: uppercase;
        font-weight: bold;
        height: 50px;
        font-size: 14px;
        color: #fff;
        padding: 15px 30px;
        text-decoration: none;
        letter-spacing: 1px;
        display: inline-block;
        transition: 0.1s ease-in-out all;
        box-shadow: 0 3px 30px 0 rgba(0, 0, 0, 0.2);
        background: #20c17d;
        background-image: linear-gradient(-180deg, #3de69f 0%, #22c37f 100%);
        transform: scale(1);
      }

      .btn:hover {
        transform: scale(1.03);
        box-shadow: 0 12px 30px 0 rgba(0, 0, 0, 0.3);
      }

      .btn--blue {
        box-shadow: none;
        background: #1c92b3;
        background-image: linear-gradient(-180deg, #47c4ff 0%, #2ba4ec 100%)
      }

    CSS
  end

  private def load_lato_font
    css_link "https://fonts.googleapis.com/css?family=Lato:400,900"
  end

  private def normalize_styles
    style <<-CSS
      /*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}
    CSS
  end

  private def raw(string)
    view << string
  end

  private def lucky_logo_data_uri
    ""
  end
end
